<template>
  <view class="user">
    <view class="user_hd">
      <view class="pagenation">
        <view class="pagenation_title"> 个人中心 </view>
      </view>
      <view class="user_info">
        <!-- 用户信息 -->
        <!-- <view class="user_msg" v-if="loginFlag != true">
					<view class="user_msg_attr">
						<image src="../../static/image/memberCenter/attr.png" mode="aspectFill"></image>
					</view>
					<view class="user_msg_title">
						尊敬的会员
					</view>
					<view class="user_msg_login" @tap="toLogin()">
						去登录
					</view>
				</view> -->
        <view class="user_msg" @click="toInfo()">
          <view class="user_msg_attr">
            <image :src="user.userImg" mode="aspectFill"></image>
          </view>
          <view class="user_msg_content">
            <view class="user_msg_name"> 昵称:{{ user.userName }} </view>
            <!-- <view class="user_msg_phone">
							<image src="../../static/image/memberCenter/phone.svg" mode=""></image>
							<text>15800000000</text>
						</view> -->
          </view>
        </view>
        <!-- 用户其他信息 -->
        <!-- <view class="user_other">
					<view class="user_other_item user_score">
						<view class="user_other_item_num">
							0
						</view>
						<view class="user_other_item_name">
							积分
						</view>
					</view>
					<view class="user_ohter_line">
						
					</view>
					<view class="user_other_item user_money">
						<view class="user_other_item_num">
							0
						</view>
						<view class="user_other_item_name">
							全部余额
						</view>
					</view>
				</view> -->
      </view>
    </view>
    <view class="user_bd">
      <!-- banner图 -->
      <!-- <view class="user_banner">
				<image src="../../static/image/memberCenter/banner.jpg" mode="aspectFill"></image>
			</view> -->
      <view class="user_functions">
        <!-- <view class="user_function" @tap="toInfo()">
					<view class="user_function_icon">
						<image src="../../static/image/memberCenter/information.svg" mode=""></image>
					</view>
					<view class="user_function_title">
						个人资料
					</view>
					<view class="user_function_more">
						<uni-icons type="forward" size="16"></uni-icons>
					</view>
				</view> -->
        <view class="user_function" @tap="toAddress()">
          <view class="user_function_icon">
            <image
              src="../../static/image/memberCenter/address.svg"
              mode=""
            ></image>
          </view>
          <view class="user_function_title"> 地址管理 </view>
          <view class="user_function_more">
            <uni-icons type="forward" size="16" color="#666"></uni-icons>
          </view>
        </view>
        <!-- <view class="user_function" @tap="toEvaluate()">
					<view class="user_function_icon">
						<image src="../../static/image/memberCenter/evaluate.svg" mode=""></image>
					</view>
					<view class="user_function_title">
						我的评价
					</view>
					<view class="user_function_more">
						<uni-icons type="forward" size="16" color="#666"></uni-icons>
					</view>
				</view>
				
				<view class="user_function">
					<view class="user_function_icon">
						<image src="../../static/image/memberCenter/agreement.svg" mode=""></image>
					</view>
					<view class="user_function_title">
						注册协议
					</view>
					<view class="user_function_more">
						<uni-icons type="forward" size="16"></uni-icons>
					</view>
				</view>
				
				<view class="user_function">
					<view class="user_function_icon">
						<image src="../../static/image/memberCenter/ticket.svg" mode=""></image>
					</view>
					<view class="user_function_title">
						优惠券
					</view>
					<view class="user_function_more">
						<uni-icons type="forward" size="16"></uni-icons>
					</view>
				</view> -->
      </view>
    </view>
    <tabBar current="3"></tabBar>
  </view>
</template>

<script>
const defaultAvatarUrl = "../../static/image/avator.png";
import { getMyInfo, upLoadFile } from "../../api/api.js";
export default {
  data() {
    return {
      loginFlag: true,
      user: {
        userImg: defaultAvatarUrl,
        userName: "-",
      },
    };
  },
  onShow() {
    this.queryMyInfo();
  },
  methods: {
    queryMyInfo() {
      getMyInfo().then((res) => {
        this.user = res.data;
      });
    },
    // 前往登录
    toLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    // 我的资料
    toInfo() {
      uni.navigateTo({
        url: "/pages/memberCenter/information",
      });
    },
    // 我的地址
    toAddress() {
      uni.navigateTo({
        url: "/pages/memberCenter/address/address",
      });
    },
    // 我的评价
    toEvaluate() {
      uni.navigateTo({
        url: "/pages/order/evaluateList",
      });
    },
  },
  onLoad() {},
};
</script>

<style lang="scss">
.user_hd {
  width: 100%;
  height: 640rpx;
  padding: 70rpx 32rpx 0;
  // background: url('../../static/image/memberCenter/bg.png') no-repeat center center;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );
  background-size: cover;

  .pagenation_title {
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 500;
  }
  .user_info {
    .user_msg {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 26rpx;
      .user_msg_attr {
        width: 124rpx;
        height: 124rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 4rpx solid #fff;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .user_msg_title {
        margin-left: 15rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #fff;
      }
      .user_msg_login {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 150rpx;
        height: 64rpx;
        border-radius: 64rpx;
        background-color: #fff;
        color: #2588ff;
        font-size: 24rpx;
        font-weight: bolder;
      }
      .user_msg_content {
        margin-left: 15rpx;
        .user_msg_name {
          font-size: 36rpx;
          font-weight: 500;
          color: #fff;
        }
        .user_msg_phone {
          margin-top: 5rpx;
          image {
            width: 22rpx;
            height: 22rpx;
          }
          text {
            color: #fff;
            font-size: 28rpx;
            margin-left: 8rpx;
          }
        }
      }
    }
    .user_other {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 40rpx;
      padding: 0 30rpx;
      .user_other_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .user_other_item_num {
          font-size: 28rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }
        .user_other_item_name {
          font-size: 28rpx;
          color: #fff;
        }
      }
      .user_ohter_line {
        width: 2rpx;
        height: 40rpx;
        background-color: #fff;
      }
    }
  }
}
.user_bd {
  padding: 40rpx 32rpx 180rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #f4f4f4;
  margin-top: -200rpx;
  min-height: calc(100vh - 500rpx);
  .user_banner {
    height: 220rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }
  .user_functions {
    .user_function {
      position: relative;
      display: flex;
      align-items: center;
      height: 90rpx;
      padding: 0 24rpx;
      border-radius: 12rpx;
      background-color: #fff;
      margin-top: 20rpx;
      .user_function_icon {
        margin-top: 10rpx;
        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
      .user_function_title {
        font-size: 24rpx;
        color: #666;
        margin-left: 15rpx;
      }
      .user_function_more {
        position: absolute;
        right: 24rpx;
      }
    }
  }
}
</style>
